<template>
    <div>
        <a-layout>
            <a-layout-sider :style="{position: 'fixed',width:'300px'}">
                <file-browse></file-browse>
            </a-layout-sider>
            <a-layout-content  :style="{ marginLeft: '300px' }">
                <div id="main">
                    <!--    <h2>通过html方式显示</h2>-->
                    <!--    <le-preview ref="html-preview" :value="html" :hljs-css="hljsCss"></le-preview>-->
                    <h2>通过markdown方式显示</h2>
                    <le-preview ref="md-preview" :is-md="true" :value="mdContent" :hljs-css="hljsCss"></le-preview>
                </div>
            </a-layout-content>
        </a-layout>
    </div>
</template>
<script>
    import FileBrowse from '../components/FileBrowse'
    import ALayoutSider from "ant-design-vue/es/layout/Sider";

    export default {
        components: {
            ALayoutSider,
            FileBrowse
        },
        data() {
            return {
                hljsCss: 'agate',
                html: '这里放html文本',
                mdContent: '@[TOC](导航)\n' +
                'Markdown 语法简介\n' +
                '# 字符效果、分隔线\n' +
                '----\n' +
                '\n' +
                '~~删除~~\n' +
                '\n' +
                '*斜体字*      _斜体字_\n' +
                '\n' +
                '**粗体**  __粗体__\n' +
                '\n' +
                '***粗斜体*** ___粗斜体___\n' +
                '\n' +
                '上标：X<sup>2</sup>，X^2^\n' +
                '下标：O<sub>2</sub>， X~2~\n' +
                '\n' +
                '**缩写(同HTML的abbr标签)**\n' +
                '\n' +
                'The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.\n' +
                '\n' +
                '# 引用\n' +
                '\n' +
                '> 引用文本\n' +
                '\n' +
                '# 锚点与链接 Links\n' +
                '[普通链接](https://gitee.com/Chave-Z/vue-md-editor/)\n' +
                '\n' +
                '[普通链接带标题](https://gitee.com/Chave-Z/vue-md-editor/ "普通链接带标题")\n' +
                '\n' +
                '直接链接：<https://gitee.com/Chave-Z/vue-md-editor>\n' +
                '\n' +
                '# 代码高亮\n' +
                '\n' +
                '## 行内代码\n' +
                '\n' +
                '\n' +
                '执行命令：`Inline code...`\n' +
                '\n' +
                '## 缩进风格\n' +
                '\n' +
                '    <toolbar ref="toolbar">\n' +
                '    </toolbar>\n' +
                '\n' +
                '## JS代码\n' +
                '```javascript\n' +
                'function test() {\n' +
                '\tconsole.log("Hello world!");\n' +
                '}\n' +
                '```\n' +
                '\n' +
                '## HTML 代码 HTML codes\n' +
                '```html\n' +
                '<!DOCTYPE html>\n' +
                '<html>\n' +
                '    <head>\n' +
                '        <mate charest="utf-8" />\n' +
                '        <title>Hello world!</title>\n' +
                '    </head>\n' +
                '    <body>\n' +
                '        <h1 class="text-xxl">Hello world!</h1>\n' +
                '    </body>\n' +
                '</html>\n' +
                '```\n' +
                '# 图片 Images\n' +
                '## 图片 Image\n' +
                '\n' +
                '![markdown](https://www.runoob.com/wp-content/uploads/2019/03/iconfinder_markdown_298823.png)\n' +
                '## 图片加链接 (Image + Link)\n' +
                '\n' +
                '[![](https://www.runoob.com/wp-content/uploads/2019/03/iconfinder_markdown_298823.png)](https://www.runoob.com/wp-content/uploads/2019/03/iconfinder_markdown_298823.png "markdown")\n' +
                '\n' +
                '---\n' +
                '\n' +
                '# 列表 Lists\n' +
                '\n' +
                '## 无序列表（减号）Unordered Lists (-)\n' +
                '\n' +
                '- 列表一\n' +
                '- 列表二\n' +
                '- 列表三\n' +
                '\n' +
                '## 无序列表（星号）Unordered Lists (*)\n' +
                '\n' +
                '* 列表一\n' +
                '* 列表二\n' +
                '* 列表三\n' +
                '\n' +
                '## 无序列表（加号和嵌套）Unordered Lists (+)\n' +
                '+ 列表一\n' +
                '+ 列表二\n' +
                '    + 列表二-1\n' +
                '    + 列表二-2\n' +
                '    + 列表二-3\n' +
                '+ 列表三\n' +
                '    * 列表一\n' +
                '    * 列表二\n' +
                '    * 列表三\n' +
                '\n' +
                '## 有序列表 Ordered Lists (-)\n' +
                '\n' +
                '1. 第一行\n' +
                '2. 第二行\n' +
                '3. 第三行\n' +
                '\n' +
                '# GFM task list\n' +
                '\n' +
                '- [x] GFM task list 1\n' +
                '- [x] GFM task list 2\n' +
                '- [ ] GFM task list 3\n' +
                '    - [ ] GFM task list 3-1\n' +
                '    - [ ] GFM task list 3-2\n' +
                '    - [ ] GFM task list 3-3\n' +
                '- [ ] GFM task list 4\n' +
                '    - [ ] GFM task list 4-1\n' +
                '    - [ ] GFM task list 4-2\n' +
                '\n' +
                '----\n' +
                '\n' +
                '# 绘制表格\n' +
                '\n' +
                '| 标题 | 标题 |\n' +
                '| ------------ | ------------ |\n' +
                '| 内容内容  | 内容内容 |\n' +
                '| 内容 | 内容 |\n' +
                '\n' +
                '| 标题 | 标题 |\n' +
                '| :------------ | :------------ |\n' +
                '| 内容内容内容内容 | 内容内容内容内容 |\n' +
                '| 内容 | 内容 |\n' +
                '\n' +
                '| 标题 | 标题 |\n' +
                '| :------------: | :------------: |\n' +
                '| 内容内容内容内容 | 内容内容内容内容 |\n' +
                '| 内容 | 内容 |\n' +
                '\n' +
                '| 标题 | 标题 |\n' +
                '| ------------: | ------------: |\n' +
                '| 内容内容内容内容 | 内容内容内容内容 |\n' +
                '| 内容 | 内容 |\n' +
                '----\n' +
                '\n' +
                '# Emoji表情\n' +
                '访问 [webfx](https://www.webfx.com/tools/emoji-cheat-sheet/) 参考更多使用方法。\n' +
                '\n' +
                ':sunny: :umbrella: :cloud: :snowflake: :snowman: :zap: :cyclone:  :foggy: :ocean: :cat: :dog:\n' +
                '# LaTeX 公式\n' +
                '\n' +
                '`$` 表示行内公式： \n' +
                '\n' +
                '质能守恒方程可以用一个很简洁的方程式 $E=mc^2$ 来表达。\n' +
                '\n' +
                '`$$ `表示整行公式：\n' +
                '\n' +
                '$$\\sum_{i=1}^n a_i=0$$\n' +
                '\n' +
                '$$f(x_1,x_x,\\ldots,x_n) = x_1^2 + x_2^2 + \\cdots + x_n^2 $$\n' +
                '\n' +
                '$$\\sum_{i=0}^n i^2 = \\frac{(n^2+n)(2n+1)}{6}$$\n' +
                '\n' +
                '访问 [MathJax](http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference) 参考更多使用方法。\n' +
                '\n' +
                '# 流程图\n' +
                '\n' +
                '```flow\n' +
                'start=>start: 开始\n' +
                'loginInfo=>inputoutput: 登录数据\n' +
                'verifyLogin=>subroutine: 登录验证\n' +
                'isSuccess=>condition: 验证成功？\n' +
                'respondSuccess=>operation: 响应成功\n' +
                'responseFailure=>operation: 响应失败\n' +
                'end=>end: 结束\n' +
                '\n' +
                'start->loginInfo->verifyLogin->isSuccess\n' +
                'isSuccess(yes)->respondSuccess->end\n' +
                'isSuccess(no)->responseFailure->end\n' +
                '```\n' +
                '\n' +
                '# 视频、音频\n' +
                '\n' +
                '<video id="video"\n' +
                '           controls=""\n' +
                '           preload="none"\n' +
                '           width="100%"\n' +
                '           >\n' +
                '    <source id="mp4"\n' +
                '              src="https://www.w3school.com.cn/i/movie.ogg"\n' +
                '              type="video/mp4">\n' +
                '</video>\n' +
                '\n' +
                '<audio id="audio"\n' +
                '        controls=""\n' +
                '        preload="none">\n' +
                '    <source id="mp3"\n' +
                '          src="http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_849867&response=res&type=convert_url&">\n' +
                '</audio>\n' +
                '\n' +
                '# 脚注\n' +
                '生成一个脚注1[^footnote].\n' +
                '生成一个脚注2[^foot].\n' +
                '[^footnote]: 这里是 **脚注** 的 *内容*.\n' +
                ' [^foot]:这里是**脚注2**的*内容*.\n'
            }
        },
        methods: {},
    }
</script>

<style>
    #main {
        color: #2c3e50;
        margin: 50px;
    }
</style>
